<template>
	<div class="special-issue">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>专项问题管理</span>
					<div class="header-actions">
						<el-button type="primary" size="small" @click="openDialog('add')">新增问题</el-button>
					</div>
				</div>
			</template>

			<!-- 搜索区域 -->
			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="问题名称">
					<el-input v-model="filters.name" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="filters.status" clearable>
						<el-option label="未完成" value="未完成" />
						<el-option label="进行中" value="进行中" />
						<el-option label="已完成" value="已完成" />
					</el-select>
				</el-form-item>
				<el-form-item label="优先级">
					<el-select v-model="filters.priority" clearable>
						<el-option label="高" value="高" />
						<el-option label="中" value="中" />
						<el-option label="低" value="低" />
					</el-select>
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="filters.leader" />
				</el-form-item>
				<el-form-item label="部门">
					<el-input v-model="filters.dept" />
				</el-form-item>
				<el-button type="primary">搜索</el-button>
				<el-button @click="reset">重置</el-button>
			</el-form>

			<el-table :data="filteredList" border stripe>
				<el-table-column prop="name" label="问题名称" />
				<el-table-column prop="dept" label="部门" width="100" />
				<el-table-column prop="leader" label="负责人" width="100" />
				<el-table-column prop="priority" label="优先级" width="100">
					<template #default="scope">
						<el-tag
							:type="scope.row.priority === '高' ? 'danger' : scope.row.priority === '中' ? 'warning' : 'info'">
							{{ scope.row.priority }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="status" label="状态" width="100" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeIssue(scope.$index)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="问题名称"><el-input v-model="form.name" /></el-form-item>
				<el-form-item label="部门"><el-input v-model="form.dept" /></el-form-item>
				<el-form-item label="负责人"><el-input v-model="form.leader" /></el-form-item>
				<el-form-item label="成员"><el-input v-model="form.members" /></el-form-item>
				<el-form-item label="问题描述"><el-input type="textarea" v-model="form.desc" /></el-form-item>
				<el-form-item label="创建人"><el-input v-model="form.creator" /></el-form-item>
				<el-form-item label="简介"><el-input type="textarea" v-model="form.summary" /></el-form-item>
				<el-form-item label="状态">
					<el-select v-model="form.status">
						<el-option label="未完成" value="未完成" />
						<el-option label="进行中" value="进行中" />
						<el-option label="已完成" value="已完成" />
					</el-select>
				</el-form-item>
				<el-form-item label="优先级">
					<el-select v-model="form.priority">
						<el-option label="高" value="高" />
						<el-option label="中" value="中" />
						<el-option label="低" value="低" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const list = ref([...Array(15)].map((_, i) => {
	const names = ['原材料不符', '图纸误差', '工艺缺陷', '检测异常', '生产延误']
	const depts = ['质检部', '工程部', '生产部', '技术部']
	const status = ['未完成', '进行中', '已完成']
	const priority = ['高', '中', '低']
	const creator = ['张三', '李四', '王五']
	const members = ['赵六', '钱七', '孙八']
	return {
		name: `${names[i % 5]}专项问题`,
		dept: depts[i % 4],
		leader: creator[i % 3],
		members: `${members[i % 3]}, ${members[(i + 1) % 3]}`,
		desc: `关于第${i + 1}项问题的详细描述...`,
		creator: creator[i % 3],
		summary: `这是问题${i + 1}的简介`,
		status: status[i % 3],
		priority: priority[i % 3],
		important: i % 5 === 0
	}
}))

const filters = ref({ name: '', status: '', priority: '', leader: '', dept: '' })

const filteredList = computed(() => {
	return list.value.filter(i => {
		const f = filters.value
		return [
			!f.name || i.name.includes(f.name),
			!f.status || i.status === f.status,
			!f.priority || i.priority === f.priority,
			!f.leader || i.leader.includes(f.leader),
			!f.dept || i.dept.includes(f.dept)
		].every(Boolean)
	})
})

const removeIssue = (index) => {
	list.value.splice(index, 1)
}


const reset = () => {
	filters.value = { name: '', status: '', priority: '', leader: '', dept: '' }
}

const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const openDialog = (type, row = null) => {
	dialogTitle.value = type === 'add' ? '新增专项问题' : '编辑专项问题'
	dialogVisible.value = true
	if (row) {
		form.value = { ...row }
		currentIndex.value = list.value.findIndex(i => i.name === row.name)
	} else {
		form.value = {
			name: '', dept: '', leader: '', members: '',
			desc: '', creator: '', summary: '',
			status: '未完成', priority: '中', important: false
		}
		currentIndex.value = -1
	}
}

const submitForm = () => {
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = { ...form.value }
	} else {
		list.value.push({ ...form.value })
	}
	dialogVisible.value = false
}


const setPriority = (row) => (level) => {
	row.priority = level
}


</script>

<style scoped>
.special-issue {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.header-actions {
	display: flex;
	gap: 10px;
}

.mb-2 {
	margin-bottom: 12px;
}
</style>

